<template>
	<view class="m-loading-view">
		<svg v-if="status==1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
		 x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
			<rect x="0" y="5.12" width="4" height="20.76" fill="#333">
				<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="1s" repeatCount="indefinite"></animate>
				<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="1s" repeatCount="indefinite"></animate>
			</rect>
			<rect x="10" y="9.12" width="4" height="12.76" fill="#333">
				<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="1s" repeatCount="indefinite"></animate>
				<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="1s" repeatCount="indefinite"></animate>
			</rect>
			<rect x="20" y="12.88" width="4" height="5.24" fill="#333">
				<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="1s" repeatCount="indefinite"></animate>
				<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="1s" repeatCount="indefinite"></animate>
			</rect>
		</svg>
		<view v-if="show">{{statusText[status]}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 0,
				urlName: '',
				postData: ''
			};
		},
		mounted() {
			if (!this.about) return;
			this.chushihua();
		},
		props: {
			//是否自动执行
			about: {
				type: Boolean,
				default: true
			},
			statusText: {
				type: Array,
				default () {
					return ['上拉加载更多', '加载中', '------我是有底线的------', '网络异常，请重试']
				}
			},
			show: {
				type: Boolean,
				default: true,
			},
			url: '', //url 参数说明 使用get传参方式 ? 前面部分为调用接口的名称注意不是接口地址？后面部分根据接口要求自行拼接
			value: {
				type: Array,
				default () {
					return []
				}
			},
		},
		methods: {
			chushihua(){
				if(!this.url){
					return
				}
				setTimeout(() => { //解决微信下参数延迟问题
					if (typeof this.url !== 'undefined') {
						this.urlName = this.url.split("?")[0];
						this.postData = this.$mUtils.getRequestParameters(this.url);
						this.postData.page_num = this.postData.page || 1;
						this.postData.page_size = this.postData.limit || 20;
						// this.$emit('input', []);
						this.status = 0;
						this.getList(true);
					}
				}, 100)
			},
			getList(chushi) {
				if(!this.urlName) return;
				let _this = this;
				if (_this.status == 2 || _this.status == 1){
                    return
                };
				//修改显示状态
				_this.status = 1;
				//避免未知错误
				let timeout = setTimeout(() => {
					_this.status = 3;
				}, 10000)
                // _this.status = 2;
				this.$apis[this.urlName](this.postData, (res) => {
					let arr = [];
					if(this.$mUtils.gettype(res) == '[object Array]'){
						arr = res.list
					}else{
						for(let i in res){
							if(this.$mUtils.gettype(res[i])  == '[object Array]'){
								if(i == 'list'){
									arr = res[i];
								}
							}
						}
					}
					for (let i in arr) {
						arr[i].webKeySuiJiShu = Math.ceil(Math.random()*1000000000);
					}
					clearTimeout(timeout);
					if(arr.length == 0){
						_this.status = 2;
					}
					if(arr.length != this.postData.limit){
						_this.status = 2;
					} else {
						_this.status = 0;
					}
					//接收到的数据处理等待后台接口搭建
					let data = this.value;
					if(chushi){
						_this.$emit('input',arr);
					}else{
						data.splice(data.length,0,...arr);
						_this.$emit('input',data);
					}
					this.postData.page++;
					_this.$emit('getStatus', {
						status: _this.status,
						data: res
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.m-loading-view {
		display: flex;
		justify-content: center;
		color: #999;
		font-size: 30rpx;
		align-items: center;
		margin-top: 22upx;
	}
</style>
